<template>
  <base-container>
    <avue-table-search
      :key="`search-${tabStatus}`"
      v-model="searchParams"
      :option="searchOption"
      @search-change="loadTableSearch"
      @search-reset="loadTableSearchReset"
    >
      <template #menu-after>
        <!-- 其他按钮 -->
        <el-button>导出</el-button>
      </template>
    </avue-table-search>

    <base-table-card>
      <template #header-left>
        <!-- tabs 只绑定本地 tabStatus，不直接绑 searchParams -->
        <el-tabs v-model="tabStatus" @tab-click="handleTabClick">
          <el-tab-pane v-for="items in serviceList" :key="items.id" :label="items.name" :name="items.id" />
        </el-tabs>
      </template>

      <avue-crud
        ref="crudRef"
        v-model="formData"
        :data="tableData"
        :option="tableOption"
        :page="page"
        :table-loading="tableLoading"
        @refresh-change="loadGetTableData"
        @current-change="loadTablePageChange"
        @size-change="loadTablePageSizeChange"
      >
        <template #bizId-header>
          <div class="flex items-center justify-center">
            关联订单
            <el-tooltip
              class="box-item"
              effect="dark"
              content="关联订单是指当前应用的消费是在该订单中操作产生的"
              placement="top-start"
            >
              <img src="@/assets/application/question.png" class="w-14px h-14px ml-3px" alt="" />
            </el-tooltip>
          </div>
        </template>
      </avue-crud>
    </base-table-card>
  </base-container>
</template>

<script setup>
  import useCrudHook from "avue-table/useCrudHook";
  import Option from "@/crudOption/application/consumption";

  const { userInfo } = useUserInfoStore();
  const tabStatus = ref();

  // 配置
  const { searchOption, tableOption } = Option();
  let {
    data: tableData,
    loading: tableLoading,
    page,
    search: searchParams,
    form: formData,
    get: loadGetTableData,
    pageNumChange: loadTablePageChange,
    pageSizeChange: loadTablePageSizeChange,
    searchReset: loadTableSearchReset,
    searchChange: loadTableSearch,
  } = useCrudHook({
    get: Api.application.shopSpendPage,
    // 查询参数格式化
    getParamsFormat: p => {
      const params = { ...p };
      if (Array.isArray(params.execTime) && params.execTime.length === 2) {
        params.execBeginTime = params.execTime[0];
        params.execEndTime = params.execTime[1];
      }
      delete params.execTime;
      params.tenantId = userInfo.tenantId;
      params.shopId = userInfo.shopId;
      params.serviceCategoryId = tabStatus.value;
      return params;
    },
  });

  function handleTabClick(tab) {
    tabStatus.value = tab.props.name;
    loadGetTableData();
  }

  const serviceList = ref([]);
  onMounted(async () => {
    await Api.application.serviceList().then(res => {
      if (res.code === "200") {
        serviceList.value = res.data.filter(item => item.id !== 4);
        tabStatus.value = serviceList.value[0]?.id;
      }
    });
    await loadGetTableData();
  });
</script>
<style lang="scss" scoped></style>
